<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>IScroll</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
	<link rel="stylesheet" type="text/css" href="../../style/public.css">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="scroll-box" id="scroll-box-1">
		<div class="scroll-c">
			<ul class="scroll-ul" id="scroll-ul-1">
				<li>000000000000</li><li>1111111111111</li><li>222222222</li><li>3333333333</li>
			</ul>
		</div>
	</div>
	<div class="scroll-box" id="scroll-box-2">
		<div class="scroll-c">
			<ul class="scroll-ul" id="scroll-ul-2">
				<li>000000000000</li><li>1111111111111</li><li>222222222</li>
			</ul>
		</div>	
	</div>
	<div class="evet-p">
		<p id="scrollTo">scrollTo</p>
		<p id="next">next</p>
		<p id="prev">prev</p>
		<p id="del">del</p>
	</div>
</body>
	<script src="../../libraries/zepto.min.js"></script>
	<script src="iscroll.js"></script>
	<script>

		var MyScroll = function(ele){
			this.ScrollBox = ele;//滚动外壳
			this.IsScroll = '';//滚动实例
		}
		MyScroll.prototype = {
			constructo: MyScroll
			,init: function(){
				var self = this;
				self.initScroll();
				self.bind();
			}
			,initView: function(type){
				/*
				修改demo初始化
				type:0 计算两个宽度
				type:1 只计算滚动元素的宽度
				*/
				var self = this;
				var type = type || 0;
				var scrollBox = $(self.ScrollBox);//滚动外壳
				var scrollW = scrollBox.width();//滚动宽度
				var scrollEel = scrollBox.children('.scroll-c');//滚动元素
				var scrollEelM = scrollEel.children('ul');//滚动元素里的内容
				if (type == 0) {
					scrollEelM.width(scrollW);
				};
				if (type == 1) {
					console.log('A----'+self.IsScroll.currentPage.pageX)
				};
				scrollEel.width(scrollW*scrollEelM.children('li').length);
			}
			,initScroll: function(){
				var self = this;
				//创建scroll实例
				self.initView(0);
				self.IsScroll = new IScroll(self.ScrollBox, {
					scrollX: true
					,scrollY: false
					,snap: true
					,momentum: false
				});
			}
			,bind: function(){
				var self = this;
				self.IsScroll.on('scrollEnd', function(){
					console.log(self.IsScroll.x);
					console.log(self.IsScroll.y);
					console.log(self.IsScroll.currentPage.pageX);
				});
			}
		}

		document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

		var scrollUl =  $('.scroll-ul');
		var MyScrollArr = []
		for (var i = 0; i < scrollUl.length; i++) {
			MyScrollArr[i] = new MyScroll('#scroll-box-'+(i+1)+'');
			MyScrollArr[i].init();
		};

		// var myScroll1 = new MyScroll('#scroll-box-1');
		// myScroll1.init();

		// var myScroll2 = new MyScroll('#scroll-box-2');
		// myScroll2.init();

		// $('#scrollTo').click(function(){
		// 	myScroll.scrollTo(-320,0,320);
		// })
		// $('#next').click(function(){
		// 	myScroll.next();
		// })
		// $('#prev').click(function(){
		// 	myScroll.prev();
		// })

		$('#del').click(function(){
			$('#scroll-ul-1').children('li').eq(1).remove();
			setTimeout(function () {
				MyScrollArr[0].initView(1);
			    MyScrollArr[0].IsScroll.refresh();
			}, 0);
		})


	</script>
</html>